<template>
	<div class="main">
		<div class="input">
			<div class="div">
				订单名称:<el-input v-model="shopname" style="width: 240px" />
			</div>
			
			<div class="div">
				收获人:<el-input v-model="person" style="width: 240px" />
			</div>
			
			<div class="div">
				支付时间:
				<el-date-picker
				        v-model="value"
				        type="daterange"
				        unlink-panels
				        range-separator="至"
				        start-placeholder="开始日期"
				        end-placeholder="结束日期"
				      />
			</div>
		</div>
		<div class="input">
			<div class="div">
				用户名称:<el-input v-model="name" style="width: 240px" />
			</div>
			
			<div class="div">
				手机号:<el-input v-model="phone" style="width: 240px" />
			</div>
			
			<div class="div">
				发货时间:
				<el-date-picker
				        v-model="value2"
				        type="daterange"
				        unlink-panels
				        range-separator="至"
				        start-placeholder="开始日期"
				        end-placeholder="结束日期"
				      />
			</div>
		</div>
		
		<div class="btn">
			<el-button type="primary" @click="sai">筛选</el-button>
			<el-button type="danger" @click="delsai">清空筛选</el-button>
			<el-button type="primary" @click="doExport" :loading="exportLoading">导出</el-button>
			<el-button type="primary" @click="fahuo">批量发货</el-button>
			<el-button type="primary">下载批量发货样单</el-button>
		</div>
		
		<div>
			<div class="header">
				<el-button @click="show">全部</el-button>
				<el-button @click="btn">微信支付</el-button>
				<el-button @click="btn2">支付宝支付</el-button>
				<el-button @click="btn3">待发货</el-button>
				<el-button @click="btn4">已发货</el-button>
				<!-- <el-button @click="btn5">支付超时</el-button> -->
			</div>
			<el-table
				ref="table"
			    :data="tableData"
			    style="width: 100%"
			    @selection-change="handleSelectionChange"
				:cell-class-name="tableRowClassName" 
				empty-text="暂无数据"
			  >
			    <el-table-column type="selection" width="55" />
			      <el-table-column prop="name" label="商品" width="120" />
			      <el-table-column prop="price" label="总价/数量" width="120" />
			    				<el-table-column prop="buyer" label="买家信息" width="120" />
			      <el-table-column prop="time" label="交易时间" width="220"/>
			    				<el-table-column prop="role" label="分销信息" width="120">
			    					<template #default="scope">
			    						<label :class="scope.row.role ? 'label1' : 'label2'">{{scope.row.role ? '经理' : '分销员'}}</label>
			    					</template>
			    				</el-table-column>
			    				<el-table-column prop="state" label="状态" width="120">
			    					<template #default="scope">
			    						<label :class="scope.row.state ? 'label3' : 'label4'">{{scope.row.state ? '已完成' : '未完成'}}</label>
			    					</template>
			    				</el-table-column>
			    				<el-table-column  label="操作" width="220">
			    					<template #default="scope">
			    						<el-button type="danger" @click="del(scope.row.index)">删除</el-button>
			    						<el-button type="primary" @click="open(scope.row.index)">联系客户</el-button>
			    					</template>
			    				</el-table-column>
			    				<el-table-column prop="payType" label="支付方式" width="120">
			    					<template #default="scope">
			    						<label :class="scope.row.payType ? 'label5' : 'label6'">{{scope.row.payType ? '支付宝' : '微信'}}</label>
			    					</template>
			    				</el-table-column>
			    				<el-table-column prop="source" label="来源" width="220" />
			    </el-table>
		</div>
	</div>
</template>
<script>
	import mockjs from "@/mockjs/index.js"
	import { ElMessage, ElMessageBox } from 'element-plus'
	// import * as XLSX from 'xlsx'
	
	export default{
		data(){
			return{
				shopname:'',
				person:'',
				value:'',
				value2:'',
				name:'',
				phone:'',
				tableData:'',
				list:'',
				list2:'',
				selectionList:[],
				exportLoading:false
			}
		},
		methods:{
			show(){
				this.tableData = this.list
			},
			btn(){
				this.tableData = this.list.filter(item=>{
					return item.payType == false
				})
			},
			btn2(){
				this.tableData = this.list.filter(item=>{
					return item.payType == true
				})
			},
			btn3(){
				this.tableData = this.list.filter(item=>{
					return item.state == false
				})
			},
			btn4(){
				this.tableData = this.list.filter(item=>{
					return item.state == true
				})
			},
			del(i){
				this.tableData.splice(i,1)
				this.list = this.tableData
			},
			open(i){
				ElMessageBox.confirm(
				    `${this.tableData[i].buyer} 手机号:${this.tableData[i].phone}`,
				    '客户信息',
				    {
				      confirmButtonText: '确认',
				      cancelButtonText: '取消',
				      // type: 'warning',
				    }
				  )
				    .then(() => {
				      ElMessage({
				        type: 'success',
				        message: '确认信息',
				      })
				    })
				    .catch(() => {
				      // ElMessage({
				      //   type: 'info',
				      //   message: '',
				      // })
				    })
			},
			sai(){
				if(this.value != ''){
					var time1 = this.getTime(this.value[0])
					var time2 = this.getTime(this.value[1])
					this.tableData =  this.list.filter(item=>{
						return item.time.substring(0,10) >= time1 && item.time.substring(0,10) <= time2
					})
					this.list = this.tableData
				}
				if(this.shopname != ''){
					let msg = this.shopname.split('')
					this.tableData = this.list.filter(item=>{
						for(let m of msg){
							return item.name.indexOf(m) != -1
						}
					})
					this.list = this.tableData
				}
				if(this.person != ''){
					let msg = this.person.split('')
					this.tableData = this.list.filter(item=>{
						for(let m of msg){
							return item.buyer.indexOf(m) != -1
						}
					})
					this.list = this.tableData
				}
				if(this.name != ''){
					let msg = this.name.split('')
					this.tableData = this.list.filter(item=>{
						for(let m of msg){
							return item.buyer.indexOf(m) != -1
						}
					})
					this.list = this.tableData
				}
				if(this.phone != ''){
					this.tableData = this.list.filter(item=>{
						return item.phone == this.phone
					})
					this.list = this.tableData
				}
				if(this.value2 != ''){
					var time1 = this.getTime(this.value2[0])
					var time2 = this.getTime(this.value2[1])
					this.tableData =  this.list.filter(item=>{
						return item.time.substring(0,10) >= time1 && item.time.substring(0,10) <= time2
					})
					this.list = this.tableData
				}
			},
			delsai(){
				this.value = ''
				this.shopname = ''
				this.person = ''
				this.name = ''
				this.phone = ''
				this.value2 = ''
				this.list = this.list2
				this.tableData = this.list2
			},
			fahuo(){
				this.selectionList.forEach(item=>{
					item.state = '完成'
				})
			},
			doExport(){
				this.exportLoading = true
				//关键函数
				function exportToExcel(fileName,tableData){
					const worksheet = XLSX.utils.json_to_sheet(tableData)
					const workbook = { Sheets:{data:worksheet},SheetNames:['data'] }
					const excelBuffer = XLSX.write(workbook,{bookType:'xlsx',type:'array'})
					const data = new Blob([excelBuffer],{type:'application/octet-stream'})
					FileSaver.saveAs(data,`${fileName}.xlsx`)
				}
				// fileName 为生成的 Excel 文件名称，为避免重复，这里使用时间戳作为前缀
				const fileName = moment().format('YYYY-MM-DD hh:mm:ss')+'xxx信息数据'
				// perPageSize 为请求数据的数量，由于需求方想要全部的数据，额前端要分页，所以只能把参数设置成很大
				const params = {
					
				}
			},
			handleSelectionChange(selection,row){
				this.selectionList = selection
			},
			tableRowClassName({row,column,rowIndex,columnIndex}){
				// 把每一行的索引放进row和index
				row.index = rowIndex;
				column.index = columnIndex;
			},
			getTime(time){
				var date = new Date(time);
				var y = date.getFullYear();
				var m = date.getMonth()+1;
				m = m < 10 ? ('0'+m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0'+d) : d;
				let time2 = y + '-' + m + '-' + d 
				return time2
			},
		},
		mounted(){
			this.tableData = mockjs.getOrder(1)
			this.list = this.tableData
			this.list2 = this.tableData
		}
	}
</script>

<style scoped>
	.main{
		display: flex;
		flex-wrap: wrap;
		background-color: white;
		flex-direction: column;
		
	}
.input{
	width: 100%;
	display: flex;
	align-items: center;
	margin-top: 15px;
}
.input .div:first-child{
	margin-left: 15px;
}
.input .div{
	margin-left: 50px;
}
.input .div div{
	margin-left: 3px;
}
.btn{
	margin: 20px 20px;
	display: flex;
}
.header .el-button{
	margin: 0;
	border-radius: 0;
	border-bottom: 0;
}
.header .el-button:active{
	color: aqua;
}
.el-table{
	border-top: 1px solid #ebeef5;
}
label{
	text-align: center;
}
.label1{
	color: #6dadf0;
	background-color: #e3f7ff;
	width: 50px;
	float: left;
}
.label2{
	color: #b4b5b6;
	background-color: #e1e2e6;
	width: 55px;
	float: left;
}
.label3{
	color: #8fbd79;
	background-color: #f1f8ed;
	width: 55px;
	float: left;
}
.label4{
	color: #cd8b8c;
	background-color: #f9f2f0;
	width: 55px;
	float: left;
}
.label5{
	color: #95b1e6;
	background-color: #ecf4ff;
	width: 55px;
	float: left;
}
.label6{
	color: #8fbd79;
	background-color: #f1f8ed;
	width: 55px;
	float: left;
}
</style>